<template>
	<view class="main">
		<view class="header">
			<text>发布失物招领</text>
			<button class="fabu" @click="fabu">发布</button>
		</view>
		<view class="">
			<input placeholder="输入标题..." type="text" value="" />
			<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
			<view class="tupian">
				<view class="zhanshi">
					
				</view>
				<view class="shangchuan">
					+
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholder: '输入内容...'
			}
		},
		methods: {
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif
	
				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			}
		}
	}
</script>

<style>
	.main {
		margin: 30rpx;
	}
	
	.header {
		font-size: 46rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.fabu {
		height: 60rpx;
		width: 132rpx;
		margin: 0;
		background-color: #f9cc66;
		border: none;
		line-height: 58rpx;
		border-radius: 30rpx;
	}
	input{
		height: 125rpx;
		border-bottom: solid 2rpx #ebebeb;
	}
	.container {
		padding: 10px;
	}
	
	#editor {
		width: 100%;
		height: 200px;
		background-color: #ffffff;
		margin: 50rpx 0;
	}
	
	button {
		margin-top: 10px;
	}
	.shangchuan{
		height: 190rpx;
		width: 190rpx;
		background-color: #f2f2f2;
		color: #c7c7c7;
		border-radius: 25rpx;
		text-align: center;
		line-height: 186rpx;
		font-size: 100rpx;
	}
</style>
